<template>
	<view class="content">
		<view class="top">
			<view class="header">
				<text class="cuIcon-back"> </text>
				每日签到
			</view>
			<view class="signin_days">
				已签到<span>0</span><span>0</span><span>{{totalDays}}</span>天
			</view>
		</view>
		
		<view class="signin">
			<view class="signin_title">
				您已连续签到2天，再接再厉哦~
			</view>
			<view class="signin_list">
				<ul>
					<li v-for="(item,index) in signinList" :key="index">
						<span>{{item.week}}</span>
						<view v-if="item.sign_in==0" class="signin_box">
							+{{item.point}}
						</view>
						<view v-if="item.sign_in==1" class="signin_yet">
							<text class="cuIcon-check"></text>
						</view>
					</li>
					
				</ul>
			</view>
			<view v-if="signinStatus == 0" class="signin_btn" @tap="goSignin">
				今日未签
			</view>
			<view v-if="signinStatus == 1" class="signin_btn_yet signin_btn">
				已签到
			</view>
		</view>
		
		<view class="task">
			<view class="task_title">
				<span></span><text>福利任务</text>
			</view>
			<ul>
				<li v-for="(item,index) in task_fl" :key="index">
					<view class="task_mes">
						<view class="task_detail">
							{{item.title}} <span>+{{item.point}}</span><img src="../../static/icon/award.png" alt="">
						</view>
						<view class="task_award">
							{{item.content}}
						</view>
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 1" class="task_btn">
						去点击
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 2" class="task_btn">
						去观看
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 3" class="task_btn">
						去收藏
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 4" class="task_btn">
						去评论
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 5" class="task_btn">
						去保存
					</view>
					<view v-if="item.is_complete == 1" class="task_btn_yet">
						已完成
					</view>
				</li>
				
			</ul>
		</view>
		 
		<view class="task task_daily">
			<view class="task_title">
				<span></span><text>日常任务</text>
			</view>
			<ul>
				<li v-for="(item,index) in taskDaily" :key="index">
					<view class="task_mes">
						<view class="task_detail">
							{{item.title}} <span>+{{item.point}}</span><img src="../../static/icon/award.png" alt="">
						</view>
						<view class="task_award">
							{{item.content}}
						</view>
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 1" class="task_btn">
						去点击
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 2" class="task_btn">
						去观看
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 3" class="task_btn">
						去收藏
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 4" class="task_btn">
						去评论
					</view>
					<view v-if="item.is_complete == 0&&item.gtype == 5" class="task_btn">
						去保存
					</view>
					<view v-if="item.is_complete == 1" class="task_btn_yet">
						已完成
					</view>
				</li>
				
			</ul>
		</view>
		<view class="popup_bg" v-if="popup">
			<view class="popup_detail">
				<text>明日签到可领取<span>20</span>积分</text>
				<view class="popup_btn" @tap="closePopup">
					知道了
				</view>
			</view>
			
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signinList:[],
				totalDays:'',
				signinStatus:'',
				task_fl:[],
				taskDaily:[],
				popup:false
			}
		},
		onLoad() {
			let user_mes = uni.getStorageSync('user_info');
			// console.log(user_mes);
			let user_id = user_mes.user_id;
			uni.request({
				url:'http://221.234.36.126:82/api.php/User/sign_in_list',
				method:'POST',
				data:{
					token: '1CECE2221211DDCB613882C3311EC670',
					user_id:user_id
				},
				success: (res) => {
					console.log(res.data);
					this.signinList = res.data.data.list;
					this.totalDays = res.data.data.total_days;
					this.signinStatus = res.data.data.is_sign;
					this.task_fl = res.data.data.task.welfare;
					this.taskDaily = res.data.data.task.daily;
				}
			})
		},
		methods: {
			goSignin(){
				let user_mes = uni.getStorageSync('user_info');
				let user_id = user_mes.user_id;
				// this.popup = true;
				uni.request({
					url:'http://221.234.36.126:82/api.php/User/sign_in',
					method:'POST',
					data:{
						token: '1CECE2221211DDCB613882C3311EC670',
						user_id:user_id
					},
					success: (res) => {
						this.popup = true;
					}
				})
			},
			closePopup(){
				this.popup = false;
			}
		}
	}
</script>

<style>
uni-page-body{
	min-height: 100%;
	background-color: #fdfdfd;
}

.content{
	min-height: 100%;
	background-color: #fdfdfd;
	position: relative;
	padding-bottom: 30rpx;
}
	
.top{
	width: 100%;
	height: 550rpx;
	background-image: url(/static/signin_bg.png);
	background-position: center;
	background-size: 100%;
}

.header{
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	font-size: 34rpx;
	/* position: fixed; */
	position: relative;
}

.header text{
	position: absolute;
	left: 30rpx;
}

.signin_days{
	width: 100%;
	height: 92rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 90rpx;
	font-size: 45rpx;
	color: #ffffff;
	letter-spacing: 10rpx;
}

.signin_days span{
	display: block;
	width: 60rpx;
	/* text-align: center; */
	height: 92rpx;
	line-height: 92rpx;
	font-size: 54rpx;
	color: #5DBAFE;
	background-color: #ffffff;
	padding-left: 16rpx;
	box-sizing: border-box;
	/* justify-content: center; */
	margin: 0 4rpx;
	border-radius: 5rpx;
}
	
.signin{
	width: 690rpx;
	height: 675rpx;
	position: absolute;
	top: 300rpx;
	background-color: #FFFFFF;
	left: 30rpx;
	box-shadow:0px 4px 38px 2px rgba(217,217,217,0.5);
	border-radius: 10rpx;
}
	
.signin_title{
	width: 100%;
	text-align: center;
	height: 110rpx;
	line-height: 110rpx;
	color: #666666;
	font-size: 28rpx;
	border-bottom: #EBEBEB 1px solid;
}	

.signin_list{
	width: 100%;
	box-sizing: border-box;
	padding: 0 19rpx;
}

.signin_list ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
} 

.signin_list ul li{
	width: 163rpx;
	padding-top: 40rpx;
	text-align: center;
	padding-bottom: 30rpx;
}

.signin_list ul li span{
	font-size: 28rpx;
	color: #999999;
}

.signin_box{
	width: 79rpx;
	height: 79rpx;
	line-height: 79rpx;
	border-radius: 50%;
	background-color: #FFCED4;
	margin: 0 auto;
	margin-top: 25rpx;color: #FFFFFF;
	font-size: 36rpx;
}

.signin_yet{
	width: 79rpx;
	height: 79rpx;
	line-height: 70rpx;
	border-radius: 50%;
	background:linear-gradient(180deg,rgba(254,144,165,1) 0%,rgba(252,90,90,1) 100%);
	margin: 0 auto;
	margin-top: 25rpx;color: #FFFFFF;
	font-size: 60rpx;
	font-weight: 800;
}

.signin_btn{
	width: 268rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background:linear-gradient(182deg,rgba(254,144,165,1) 0%,rgba(252,90,90,1) 100%);
	font-size: 40rpx;
	color: #FFFFFF;
	margin: 0 auto;
	margin-top: 30rpx;
}

.signin .signin_btn_yet{
	background: transparent;
	background-color: #E3E3E3;
}
	
.task{
	width: 690rpx;
	margin: 0 auto;
	box-shadow:0px 4px 38px 2px rgba(217,217,217,0.5);
	margin-top: 490rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
}	
	
.task_daily{
	margin-top: 30rpx;
}	
	
.task_title{
	width: 100%;
	height: 106rpx;
	display: flex;
	align-items: center;
	font-size: 40rpx;
}

.task_title span{
	width: 6rpx;
	height: 27rpx;
	background-color: #00A7FF;
	border-radius: 3rpx;
	margin-right: 10rpx;
}

.task_title text{
	height: 106rpx;
	line-height: 106rpx;
}

.task ul{
	width: 100%;
	height: auto;
}
.task ul li{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	/* padding: 46rpx 0; */
	padding-top: 46rpx;
	padding-bottom: 40rpx;
	border-bottom: #EDEDED 1px solid;
}

.task ul li:last-of-type{
	border: 0;
}

.task_mes{
	width: 430rpx;
}

.task_detail{
	height: 43rpx;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	color: #333333;
}

.task_detail span{
	color: #FFAF24;
	margin-left: 10rpx;
	display: block;
	height: 43rpx;
	line-height: 48rpx;
}

.task_detail img{
	display: block;
	width: 43rpx;
	height: 43rpx;
	margin-left: 6rpx;
}

.task_award{
	font-size: 26rpx;
	color: #666666;
	height: 38rpx;
	line-height: 38rpx;
	margin-top: 20rpx;
}

.task_btn{
	width: 167rpx;
	height: 60rpx;
	line-height: 60rpx;
	border: #1AA7FF 2rpx solid;
	border-radius: 30rpx;
	color: #1AA7FF;
	text-align: center;
}

.task_btn_yet{
	width: 167rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	color: #FFFFFF;
	text-align: center;
	background:linear-gradient(0deg,rgba(11,160,255,1) 0%,rgba(118,202,255,1) 100%);
}

.popup_bg{
	width: 100%;
	position: fixed;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	left: 0;
	top: 0;
	padding-top: 390rpx;
}

.popup_detail{
	width: 510rpx;
	height: 580rpx;
	margin: 0 auto;
	background-image: url(/static/signin_popup.png);
	background-position: center;
	background-size: cover;
	text-align: center;box-sizing: border-box;
	padding-top: 380rpx;
}

.popup_detail text{
	color: #B1B1B1;
	font-size: 28rpx;
}

.popup_detail text span{
	color: #52B6FF;
}

.popup_btn{
	width: 334rpx;
	height: 74rpx;
	line-height: 74rpx;
	background-color: #52B6FF;
	color: #FFFFFF;
	font-size: 36rpx;
	margin: 0 auto;
	margin-top: 50rpx;
	border-radius: 37rpx;
}
	
</style>
